<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>黑马旅游网-登录</title>
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">

    <script src="js/vue.js"></script>
    <script src="js/axios-0.19.0.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/webbase.css">
    <link rel="stylesheet" href="css/pages-seckillOrder.css">
    <script src="js/getParameter.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header">
</div>

<div class="container-fluid" id="app">
    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div id="leftPage">
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6 order-pay">
                    <div class="body userInfo">
                        <ul class="sui-nav nav-tabs nav-large nav-primary ">
                            <li class="active"><a href="#one" data-toggle="tab">基本资料</a></li>
                            <li><a href="#two" data-toggle="tab">头像照片</a></li>
                        </ul>
                        <form action="" method="post" enctype="application/x-www-form-urlencoded">

                            <input type="hidden" name="uid" value="">

                            <input type="hidden" name="action" value="updateInfo">
                            <div class="tab-content ">
                                <div id="one" class="tab-pane active">
                                    <div class="sui-form form-horizontal">
                                        <div class="control-group">
                                            <label for="inputName" class="control-label">昵称：</label>
                                            <div class="controls">
                                                <input type="text" id="inputName" name="nickname" placeholder="昵称"
                                                       v-model="user.nickname">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">性别：</label>
                                            <div class="controls">

                                                <input type="radio" name="sex" :value="0" v-model="user.sex" ><b>男</b>
                                                &nbsp;&nbsp;
                                                <input type="radio" name="sex" :value="1" v-model="user.sex"><b>女</b>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">生日：</label>
                                            <div class="controls">
                                                <input type="date" name="birthday" placeholder="生日"
                                                       v-model="user.birthday ">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">邮箱：</label>
                                            <div class="controls">
                                                <input type="text" name="email" placeholder="邮箱" v-model="user.email">
                                            </div>
                                        </div>
                                        <div class="control-group">

                                            <div class="controls">
                                                <button type="submit" class="sui-btn btn-primary" @click="updatePersonal()">更新</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="two" class="tab-pane">

                                    <div class="new-photo">
                                        <p>当前头像：</p>
                                        <div class="upload">
                                            <img id="imgShow_WU_FILE_0" width="100" height="100"
                                                 src="img/girl.png"
                                                 alt="">
                                            <input type="file" id="up_img_WU_FILE_0" name="pic"/>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--引入尾部-->
<div id="footer">
</div>
<script src="js/include.js"></script>
<script>
    //页面加载完毕，
    $(function () {

        //加载头部
        $("#leftPage").load("home_left.html");

    });


    new Vue({
        el: "#app",
        data: {
            user: {}
        },
        methods: {
            getPersonal() {
                axios.post(`user/personal`)
                    .then(response => {
                        this.user = response.data;
                    })
                    .catch(error => {
                        console.log(error)
                        alert("服务器忙...");
                    });
            },
            updatePersonal(){
                axios.post(`user/updatePersonal?nickname=${this.user.nickname}&sex=${this.user.sex}&birthday=${this.user.birthday}&email=${this.user.email}`)
                     .then(response => {
                        let result = response.data;
                        location.reload();
                      })
                      .catch(error=>{
                          console.log(error)
                          alert("服务器忙...");
                      });
            }
        },
        created() {
            this.getPersonal();
        }
    })
</script>
</body>
</html>